@import '@wordpress/base-styles/variables';
@import '@wordpress/dataviews/build-style/style.css';

// Should be implemented differently once the Multi-site Dashboard is not loaded by the Node server using the Calypso loading screen.
// I'm tempted to even just replace all this with a display:none on the logo
@import './loading-screen';

// Core component overrides.
@import './dataforms-overrides.scss';

// Global Styles
html,
body,
#wpcom {
	height: 100%;
}

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
		'Helvetica Neue', sans-serif;
	background: var( --dashboard__background-color );
	color: var( --dashboard__text-color );
	font-size: $font-size-medium;
	line-height: $font-line-height-small;

	/* stylelint-disable-next-line unit-allowed-list */
	@media ( -webkit-min-device-pixel-ratio: 1.25 ), ( min-resolution: 120dpi ) {
		text-rendering: optimizeLegibility;
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
	}
}

a {
	color: var( --wp-admin-theme-color );
}

// This is a temporary fix to ensure the tooltip has a box-shadow.
// Currently, there is an issue with @automattic/charts where svgLabelSmall.fill is defined with var().
// This causes the visx tooltip to render a malformed box-shadow value, given that it interpolates the color. e.g: `${theme?.color}55`.
.visx-tooltip:has(div[role="tooltip"]) {
	box-shadow: 0 1px 2px $gray-300 !important;
}
